<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文件清理管理</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-5">
  <h2 class="mb-4">文件清理管理</h2>

  <!-- 功能描述 -->
  <p class="mb-4">这里是文件清理管理的功能页面。</p>

  <!-- 日期筛选和开始清理 -->
  <div class="d-flex justify-content-between align-items-center mb-4">
    <div class="d-flex align-items-center">
      <label for="cleanDate" class="form-label me-2">清理日期：</label>
      <input type="date" id="cleanDate" class="form-control me-3" style="width: auto;">
      <button class="btn btn-primary" id="filterByDateButton">筛选</button>
    </div>
    <button class="btn btn-success" id="startCleanButton">开始清理</button>
  </div>

  <!-- 清理日志表格 -->
  <div>
    <h4 class="mb-3">清理日志</h4>
    <table class="table table-striped">
      <thead>
      <tr>
        <th>序号</th>
        <th>清理路径</th>
        <th>清理文件类型</th>
        <th>清理文件数量</th>
        <th>清理时间</th>
        <th>清理状态</th>
        <th>操作人</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody id="cleanLogTable">
      <!-- 清理日志数据动态加载 -->
      </tbody>
    </table>
  </div>
</div>

<!-- 详情弹框 -->
<div class="modal fade" id="detailModal" tabindex="-1" aria-labelledby="detailModalLabel" aria-hidden="true">
  <div class="modal-dialog" style="max-width: 90%; height: 80%;">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="detailModalLabel">清理日志详情</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <table class="table table-bordered">
          <thead>
          <tr>
            <th>序号</th>
            <th>文件名称</th>
            <th>备注信息</th>
          </tr>
          </thead>
          <tbody id="detailTable">
          <!-- 动态加载详情数据 -->
          </tbody>
        </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

<script>
  $(document).ready(function () {
    // 设置默认日期为当天
    const today = new Date();
    const formattedToday = today.toISOString().split("T")[0];
    $("#cleanDate").val(formattedToday);

    // 页面加载时获取清理日志
    fetchCleanLogs();

    // 点击开始清理按钮触发清理操作
    $("#startCleanButton").on("click", function () {
      const cleanData = {
        directoryPath: "D:/BI本地数据-实在",
        fileType: ".txt"
      };
      $.ajax({
        url: "/fileCleanLog/startClean",
        method: "POST",
        contentType: "application/json", // 设置请求头为 JSON 格式
        data: JSON.stringify(cleanData), // 将对象转换为 JSON 字符串
        success: function (data) {
          alert(data); // 提示用户清理结果
          fetchCleanLogs(); // 刷新清理日志表
        },
        error: function (error) {
          console.error("清理失败:", error);
          alert("清理失败，请检查日志或联系管理员！");
        }
      });
    });

    // 点击筛选按钮根据日期筛选日志
    $("#filterByDateButton").on("click", function () {
      const cleanDate = $("#cleanDate").val();

      if (!cleanDate) {
        alert("请填写清理日期！");
        return;
      }

      // 调用筛选接口
      $.ajax({
        url: "/fileCleanLog/getFileStatList",
        method: "GET",
        data: { cleanDate: cleanDate },
        success: function (data) {
          renderCleanLogTable(data); // 渲染筛选后的日志数据
        },
        error: function (error) {
          console.error("筛选失败:", error);
          alert("筛选失败，请检查日志或联系管理员！");
        }
      });
    });
  });

  // 获取清理日志数据并渲染表格
  function fetchCleanLogs() {
    $.ajax({
      url: "/fileCleanLog/getFileStatList", // 清理日志的接口地址
      method: "GET",
      success: function (data) {
        renderCleanLogTable(data);
      },
      error: function (error) {
        console.error("获取清理日志失败:", error);
      }
    });
  }

  // 渲染清理日志表格
  function renderCleanLogTable(data) {
    const tableBody = $("#cleanLogTable");
    tableBody.empty(); // 清空表格内容

    data.forEach((log, index) => {
      const row = `
                <tr>
                    <td>${index + 1}</td>
                    <td>${log.filePath}</td>
                    <td>${log.cleanType}</td>
                    <td>${log.cleanCount}</td>
                    <td>${new Date(log.cleanTime).toLocaleString()}</td>
                    <td>${log.cleanStatus}</td>
                    <td>${log.operator}</td>
                    <td>
                        <button class="btn btn-info btn-sm" onclick="viewDetails('${log.id}')">查看详情</button>
                    </td>
                </tr>`;
      tableBody.append(row);
    });
  }

  function viewDetails(id) {
    $.ajax({
      url: `/fileCleanLog/getFileCleanLogById/${id}`,
      method: "GET",
      success: function (data) {
        console.log("日志详情数据:", data);

        const tableBody = $("#detailTable");
        tableBody.empty(); // 清空之前的内容

        // 将 data 中的文件和备注信息解析并填入表格
        const files = data.remarks.split(';').map((fileName, index) => {
          return `<tr>
                            <td>${index + 1}</td>
                            <td>${fileName.trim()}</td>
                            <td>${data.filePath}</td>
                        </tr>`;
        });

        tableBody.append(files.join(""));
        $("#detailModal").modal("show"); // 显示弹框
      },
      error: function (error) {
        console.error("获取详情失败:", error);
        alert("获取详情失败，请检查日志或联系管理员！");
      }
    });
  }

</script>
</body>
</html>
